<!--
 * @Author: zsc
 * @Date: 2022-06-13 21:56:52
 * @LastEditors: zsc
 * @LastEditTime: 2022-07-26 21:18:26
 * @Description:
-->

<template>

  <el-dialog
    :before-close="beforeClose"
    :visible.sync="show"
    :title="title"
    width="80%"
    @close="close"
    @closed="closed"
  >
    <div class="app-container">
      <el-card class="app-container-tools">
        <div class="app-container-tools-search">
          <span>企业名称</span>
          <el-input v-model="WHERE.search" class="k-width-150-p k-mr-10" />
          <span>归属楼宇：</span>
          <buliding-select v-model="WHERE.building_id" />
          <!-- <span>状态：</span>
        <el-select v-model="WHERE.status" placeholder="请选择" class="k-width-100-p">
          <el-option
            v-for="item in companySizeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
          <el-button type="primary" @click="_search">查询</el-button>
          <el-button type="primary" @click="_reset">重置</el-button>
        </div>
        <div class="app-container-tools-action">

          <!--        <el-button v-permission="['BD:COMPANY:IMPORT']" style=" margin-left: 10px" @click="handleImport">导入</el-button>-->
        </div>
      </el-card>
      <!--    功能-->
      <!--    查询条件-->
      <el-card>
        <!--    表格-->
        <el-table
          ref="tb"
          v-loading="LOADING"
          :data="TABLE_DATA"
          :size="SIZE"
          border
          :height="LIST_HEIGHT_DIALOG"
          style="width: 100%"
          @selection-change="_handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <template v-for="(item) in setting">
            <el-table-column
              v-if="item.key === 'action'"
              :key="item.id"
              :label="item.name"
              :prop="item.key"
              :width="item.value"
              :fixed="item.fixed"
            >
              <template slot-scope="scope">
                <!-- <el-button @click="handleKeepAttendance(scope.row)">查看考勤</el-button> -->
                <el-button @click="handleqrcode(scope.row)">企业码</el-button>
                <el-button @click="handlePerson(scope.row)">人员信息</el-button>
                <el-button @click="handleVisitor(scope.row)">访客管理</el-button>
                <el-button @click="handleScan(scope.row)">企业信息</el-button>
                <el-button v-permission="['BD:COMPANY:EDIT']" @click="handleEdit(scope.row)">编辑</el-button>
              </template>

            </el-table-column>
            <el-table-column
              v-else-if="item.key === 'room_display'"
              :key="item.id"
              :label="item.name"
              :prop="item.key"
              :width="item.value"
              :fixed="item.fixed"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.rooms.reduce((pre, cur) => {
                    return pre + cur.name + ','
                  }, '')
                }}
                </span>
              </template>

            </el-table-column>
            <el-table-column
              v-else
              :key="item.id"
              :label="item.name"
              :prop="item.key"
              :width="item.value"
            />
          </template>
        </el-table>
        <!--    分页-->
        <pagination />
        <!--    弹窗-->
        <form-modal :visible.sync="FORM_VISIBLE" :type="FORM_TYPE" :data="FORM_DATA" @refresh="_search" />
        <scan-modal :visible.sync="scanVisible" :data="scanId" />
        <person-modal :visible.sync="personVisible" :company-id="companyId" :company-name="companyName" />
        <calendar-modal :visible.sync="ATTENDANCE_VISIBLE" :type="FORM_TYPE" :data="FORM_DATA" />
        <el-dialog :visible.sync="qrcode_visible" append-to-body @opened="handelqr()">
          <div style="width: 210px;height: 210px;margin: auto;border: #000 1px solid;display: flex">
            <div ref="qrcode" style="margin: auto" />
          </div>
        </el-dialog>
      </el-card>
    </div>
  </el-dialog>

</template>

<script>
import list from '@/list'
import CompanyClass from '@/models/company-class'
import { companyGetList } from '@/api/company'
import { companySizeOptions } from '@/list/data'
import formModal from '@/views/company/list/components/form'
import calendarModal from '@/views/company/list/components/keepAttendance'
import scanModal from '@/views/company/list/components/scan'
import bulidingSelect from '@/components/Select/BulidingSelect'
import personModal from '@/views/company/list/components/person/personList'
import QRCode from 'qrcodejs2'

const companyClass = new CompanyClass()
export default {
  name: 'DeepInterpretationOrder',
  components: { formModal, calendarModal, scanModal, bulidingSelect, personModal },
  mixins: [list],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    buildingId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      show: false,
      companySizeOptions,
      caseRequestURLType: '',
      scanVisible: false,
      scanId: 0,
      setting: companyClass.list(),
      ATTENDANCE_VISIBLE: false,
      qrcode_visible: false,
      qrcode: null,
      personVisible: false,
      companyId: 0,
      companyName: '',
      WHERE: {
        building_id: this.building_id
      }

    }
  },
  computed: {
    title() {
      return '公司列表'
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.show = val
        this._search()
      }
    }
  },
  created() {
    this.LIST_API = companyGetList
  },
  mounted() {
  },
  methods: {
    handleVisitor() {
      this.$router.push('/building/visitor')
    },
    handleEdit(item) {
      console.log('更新')
      this.FORM_TYPE = 'edit'
      this.FORM_VISIBLE = true
      this.FORM_DATA = item
    },
    handleScan(item) {
      console.log('查看')
      this.scanVisible = true
      this.scanId = item.id
    },
    handleImport() {
      console.log('导入')
      this.$notify.success('导入')
    },
    handleKeepAttendance(item) {
      console.log('考勤')
      this.FORM_TYPE = 'create'
      this.ATTENDANCE_VISIBLE = true
    },
    handleqrcode(item) {
      this.companyId = item.id
      this.qrcode_visible = true
    },
    handelqr() {
      if (this.qrcode) {
        this.qrcode.makeCode(`https://data.citylaboratory.cn/user?company_id=${this.companyId}`)
      } else {
        this.qrcode = new QRCode(this.$refs.qrcode, {
          text: `https://data.citylaboratory.cn/user?company_id=${this.companyId}`,
          width: 210,
          height: 210,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      }
    },
    handleDel(item) {
      console.log('删除', item)
      this.$confirm('确认删除？')
        .then(_ => {
          this._showSuccess('删除成功')
        })
        .catch(_ => {
        })
    },
    handlePerson(item) {
      console.log('人员信息', item)
      this.companyId = item.id
      this.companyName = item.name
      this.personVisible = true
    },
    handleClose() {
      console.log('点击关闭')
      this.beforeClose()
    },
    beforeClose() {
      console.log('关闭前的回调')
      this.show = false
      this.$emit('update:visible', false)
    },
    close() {
      console.log('关闭的回调')
    },
    closed() {
      console.log('关闭动画结束后的回调')
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/list/index.scss';
</style>
